<template>
	<view class="fence-map-view">
		<map id="fenceMap" :latitude="latitude" :longitude="longitude" :scale="scale" :include-points="includePoints"
			:show-location="true" :enable-rotate="false" :markers="editMode?markers:[]" @callouttap="onCalloutTap"
			:circles="circles" @tap="onMapTap" :polygons="polygons" class="fence-map"></map>
		<fence-control v-if="editMode" :can-cancel="snapshots.length > 0" :currentMode="currentMode"
			@drawModeChange="drawModeChange" @revoke="revoke" class="fence-control"></fence-control>
	</view>
</template>

<script>
	import fenceControl from './fence-control.vue'
	import {
		DrawMode,
		DrawState,
		DrawConfig,
		MarkerIcon
	} from "./config/fence-config.js"
	import {
		getDistance,
		getRectanglePoint,
		getPolygonCenter,
		outOfChina,
		pointInCircle,
		pointInPolygon,
		getCircleRangePoints,
		getRandomInt
	} from "./utils/fence-utils.js"

	export default {
		components: {
			fenceControl
		},
		props: {
			scale: {
				type: Number,
				default: 12
			},
			latitude: {
				type: Number,
				default: 39.90844814148917
			},
			longitude: {
				type: Number,
				default: 116.3975420260939
			},
			editMode: {
				type: Boolean,
				default: false
			},
			fenceData: {
				type: Array,
				default: []
			}
		},
		watch: {
			fenceData(newData, oldData) {
				this.initFence(newData)
			},
			editMode(newData, oldData) {
				if (!newData) {
					this.snapshots = []
					this.drawModeChange(null)
				}
			}
		},
		data() {
			return {
				currentMode: DrawMode.Empty,
				currentState: DrawState.Empty,
				snapshots: [],
				circles: [],
				polygons: [],
				markers: [],
				includePoints: [],
				incremId: 0,
			}
		},
		methods: {
			createSnapshots() {
				this.snapshots.push({
					time: new Date().getTime(),
					data: JSON.stringify({
						currentMode: this.currentMode,
						currentState: this.currentState,
						circles: this.circles,
						polygons: this.polygons,
						markers: this.markers
					})
				})
			},
			drawModeChange(mode) {
				this.currentMode = mode
				this.clearUnEndMarker()
			},
			clearUnEndMarker() {
				this.markers = this.markers.filter(marker => {
					return marker.state !== DrawState.CircleCenterEnd && marker.state !== DrawState
						.RectangleVertexEnd && marker.state !== DrawState.PolygonNotClose
				})
				this.markers.forEach(marker => {
					if (marker.state === DrawState.PolygonClosed) {
						marker.state = DrawState.PolygonEnd
					}
				})
				this.polygons.forEach(polygon => {
					if (polygon.state === DrawState.PolygonClosed) {
						polygon.state = DrawState.PolygonEnd
					}
				})
				this.currentState = DrawState.Empty
			},
			revoke() {
				let snapshot = this.snapshots.pop()
				let data = JSON.parse(snapshot.data)
				this.currentMode = data.currentMode
				this.currentState = data.currentState
				this.circles = data.circles
				this.polygons = data.polygons
				this.markers = data.markers
			},
			findMarkerIndex(id) {
				return this.markers.findIndex(marker => {
					return marker.id === id
				})
			},
			findCircleIndex(id) {
				return this.circles.findIndex(circle => {
					return circle.id === id
				})
			},
			findPolygonIndex(id) {
				return this.polygons.findIndex(polygon => {
					return polygon.id === id
				})
			},
			onMapTap(e) {
				if(!this.editMode){
					return
				}
				if (this.currentMode === DrawMode.CircleMode) {
					this.drawCircle(e);
				} else if (this.currentMode === DrawMode.RectangleMode) {
					this.drawRectang(e);
				} else if (this.currentMode === DrawMode.PolygonMode) {
					this.drawPolygon(e);
				} else {
					this.checkTapIn(e)
				}
			},
			checkTapIn(e) {
				this.circles.forEach(circle => {
					if (pointInCircle(circle.latitude, circle.longitude, circle.radius, e.detail.latitude, e.detail
							.longitude)) {
						let centerMarkerIndex = this.findMarkerIndex(circle.centerMarker);
						this.markers[centerMarkerIndex].callout = {
							isDelete: true,
							content: "删除",
							color: DrawConfig.DeleteCalloutFontColor,
							bgColor: DrawConfig.DeleteCalloutBgColor,
							fontSize: DrawConfig.CalloutFontSize,
							borderRadius: DrawConfig.CalloutBorderRadius,
							padding: DrawConfig.CalloutPadding,
							display: DrawConfig.CalloutAlways,
							textAlign: DrawConfig.CalloutTextAlign
						}
					} else {
						let centerMarkerIndex = this.findMarkerIndex(circle.centerMarker);
						this.markers[centerMarkerIndex].callout = null
					}
				})
				this.polygons.forEach(polygon => {
					if (pointInPolygon(polygon.points, e.detail.latitude, e.detail
							.longitude)) {
						let centerMarkerIndex = this.findMarkerIndex(polygon.centerMarker);
						this.markers[centerMarkerIndex].callout = {
							isDelete: true,
							content: "删除",
							color: DrawConfig.DeleteCalloutFontColor,
							bgColor: DrawConfig.DeleteCalloutBgColor,
							fontSize: DrawConfig.CalloutFontSize,
							borderRadius: DrawConfig.CalloutBorderRadius,
							padding: DrawConfig.CalloutPadding,
							display: DrawConfig.CalloutAlways,
							textAlign: DrawConfig.CalloutTextAlign
						}
					} else {
						let centerMarkerIndex = this.findMarkerIndex(polygon.centerMarker);
						this.markers[centerMarkerIndex].callout = null
					}
				})
			},
			onCalloutTap(e) {
				this.createSnapshots()
				let markerId = e.detail.markerId
				let markerIndex = this.findMarkerIndex(markerId)
				let marker = this.markers[markerIndex]
				if (!marker.callout.isDelete) {
					return
				}
				if (marker.mode === DrawMode.CircleMode) {
					let circelIndex = this.findCircleIndex(marker.circle)
					this.circles.splice(circelIndex, 1)
				}
				if (marker.mode === DrawMode.RectangleMode || marker.mode === DrawMode.PolygonMode) {
					let polygonIndex = this.findPolygonIndex(marker.polygon)
					this.polygons.splice(polygonIndex, 1)
				}
				marker.markers.forEach(relateMarker => {
					let relateMarkerIndex = this.findMarkerIndex(relateMarker)
					this.markers.splice(relateMarkerIndex, 1)
				})
			},
			drawCircle(e) {
				if (this.currentState === DrawState.Empty) {
					this.createSnapshots()
					this.markers.push({
						id: new Date().getTime(),
						latitude: e.detail.latitude,
						longitude: e.detail.longitude,
						iconPath: MarkerIcon.PointIcon,
						state: DrawState.CircleCenterEnd,
						mode: DrawMode.CircleMode,
						width: MarkerIcon.PointIconWidth,
						height: MarkerIcon.PointIconHeight,
						anchor: MarkerIcon.PointIconAnchor,
						callout: {
							fontSize: DrawConfig.CalloutFontSize,
							content: "圆心",
							bgColor: DrawConfig.CalloutBgColor,
							borderRadius: DrawConfig.CalloutBorderRadius,
							display: DrawConfig.CalloutAlways,
							padding: DrawConfig.CalloutPadding,
							textAlign: DrawConfig.CalloutTextAlign
						}
					})
					this.currentState = DrawState.CircleCenterEnd
				} else if (this.currentState === DrawState.CircleCenterEnd) {
					this.createSnapshots()
					let centerMarkerIndex = this.markers.findIndex(marker => {
						return marker.state === DrawState.CircleCenterEnd
					})
					let centerMarker = this.markers[centerMarkerIndex]
					let radius = getDistance(centerMarker.latitude, centerMarker.longitude, e.detail.latitude, e.detail
						.longitude)
					let circle = {
						id: new Date().getTime(),
						latitude: centerMarker.latitude,
						longitude: centerMarker.longitude,
						radius: radius,
						strokeWidth: DrawConfig.StrokeWidth,
						centerMarker: centerMarker.id,
						color: DrawConfig.StrokeColor,
						fillColor: DrawConfig.FillColor
					}
					this.circles.push(circle)
					let rangeMarker = {
						id: new Date().getTime(),
						latitude: e.detail.latitude,
						longitude: e.detail.longitude,
						iconPath: MarkerIcon.PointIcon,
						state: DrawState.CircleEnd,
						mode: DrawMode.CircleMode,
						circle: circle.id,
						width: MarkerIcon.PointIconWidth,
						height: MarkerIcon.PointIconHeight,
						anchor: MarkerIcon.PointIconAnchor,
						callout: {
							content: "半径 : " + radius.toFixed(2) + " 米",
							fontSize: DrawConfig.CalloutFontSize,
							bgColor: DrawConfig.CalloutBgColor,
							borderRadius: DrawConfig.CalloutBorderRadius,
							display: DrawConfig.CalloutAlways,
							padding: DrawConfig.CalloutPadding,
							textAlign: DrawConfig.CalloutTextAlign
						}
					}
					this.markers.push(rangeMarker)
					this.markers[centerMarkerIndex].state = DrawState.CircleEnd
					this.markers[centerMarkerIndex].callout = null
					this.markers[centerMarkerIndex].circle = circle.id
					this.markers[centerMarkerIndex].markers = [this.markers[centerMarkerIndex].id, rangeMarker.id]
					this.currentState = DrawState.Empty
					this.currentMode = DrawMode.Empty
				}
			},
			drawRectang(e) {
				if (this.currentState === DrawState.Empty) {
					this.createSnapshots()
					this.markers.push({
						id: new Date().getTime(),
						latitude: e.detail.latitude,
						longitude: e.detail.longitude,
						iconPath: MarkerIcon.PointIcon,
						state: DrawState.RectangleVertexEnd,
						mode: DrawMode.RectangleMode,
						width: MarkerIcon.PointIconWidth,
						height: MarkerIcon.PointIconHeight,
						anchor: MarkerIcon.PointIconAnchor,
						callout: {
							fontSize: 15,
							content: "顶点",
							bgColor: DrawConfig.CalloutBgColor,
							borderRadius: DrawConfig.CalloutBorderRadius,
							display: DrawConfig.CalloutAlways,
							padding: DrawConfig.CalloutPadding,
							textAlign: DrawConfig.CalloutTextAlign
						}
					})
					this.currentState = DrawState.RectangleVertexEnd
				} else if (this.currentState === DrawState.RectangleVertexEnd) {
					this.createSnapshots()
					let vertexMarkerIndex = this.markers.findIndex(marker => {
						return marker.state === DrawState.RectangleVertexEnd
					})
					let vertexMarker = this.markers[vertexMarkerIndex]
					if (vertexMarker.latitude === e.detail.latitude || vertexMarker.longitude === e.detail.longitude) {
						return
					}
					let rectangle = getRectanglePoint(vertexMarker.latitude, vertexMarker.longitude, e.detail.latitude, e
						.detail.longitude)
					let pointMarker = {
						id: new Date().getTime(),
						latitude: e.detail.latitude,
						longitude: e.detail.longitude,
						iconPath: MarkerIcon.PointIcon,
						state: DrawState.RectangleEnd,
						mode: DrawMode.RectangleMode,
						width: MarkerIcon.PointIconWidth,
						height: MarkerIcon.PointIconHeight,
						anchor: MarkerIcon.PointIconAnchor
					}

					let centerMarker = {
						id: new Date().getTime() + 1,
						latitude: rectangle.center.latitude,
						longitude: rectangle.center.longitude,
						iconPath: MarkerIcon.EmptyIcon,
						state: DrawState.RectangleEnd,
						mode: DrawMode.RectangleMode,
						width: MarkerIcon.EmptyIconWidth,
						height: MarkerIcon.EmptyIconHeight,
						anchor: MarkerIcon.EmptyIconAnchor
					}
					centerMarker.markers = [centerMarker.id, vertexMarker.id, pointMarker.id]
					let polygon = {
						id: new Date().getTime(),
						points: rectangle.points,
						strokeWidth: DrawConfig.StrokeWidth,
						centerMarker: centerMarker.id,
						state: DrawState.RectangleEnd,
						strokeColor: DrawConfig.StrokeColor,
						fillColor: DrawConfig.FillColor
					}
					centerMarker.polygon = polygon.id
					this.polygons.push(polygon)
					this.markers.push(centerMarker)
					this.markers.push(pointMarker)
					this.markers[vertexMarkerIndex].state = DrawState.RectangleEnd
					this.markers[vertexMarkerIndex].callout = null
					this.currentState = DrawState.Empty
					this.currentMode = DrawMode.Empty
				}
			},
			drawPolygon(e) {
				if (this.currentState === DrawState.Empty) {
					this.createSnapshots()
					this.markers.push({
						id: new Date().getTime(),
						latitude: e.detail.latitude,
						longitude: e.detail.longitude,
						iconPath: MarkerIcon.PointIcon,
						state: DrawState.PolygonNotClose,
						mode: DrawMode.PolygonMode,
						index: 1,
						width: MarkerIcon.PointIconWidth,
						height: MarkerIcon.PointIconHeight,
						anchor: MarkerIcon.PointIconAnchor
					})
					this.currentState = DrawState.PolygonNotClose
				} else if (this.currentState === DrawState.PolygonNotClose) {
					this.createSnapshots()
					let unCloseMarker = this.markers.filter(marker => marker.state === DrawState.PolygonNotClose)
					if (unCloseMarker.length < 2) {
						this.markers.push({
							id: new Date().getTime(),
							latitude: e.detail.latitude,
							longitude: e.detail.longitude,
							iconPath: MarkerIcon.PointIcon,
							state: DrawState.PolygonNotClose,
							mode: DrawMode.PolygonMode,
							index: unCloseMarker.length + 1,
							width: MarkerIcon.PointIconWidth,
							height: MarkerIcon.PointIconHeight,
							anchor: MarkerIcon.PointIconAnchor
						})
					} else {
						this.markers.push({
							id: new Date().getTime(),
							latitude: e.detail.latitude,
							longitude: e.detail.longitude,
							iconPath: MarkerIcon.PointIcon,
							state: DrawState.PolygonClosed,
							mode: DrawMode.PolygonMode,
							index: unCloseMarker.length + 1,
							width: MarkerIcon.PointIconWidth,
							height: MarkerIcon.PointIconHeight,
							anchor: MarkerIcon.PointIconAnchor
						})
						this.markers.forEach(marker => {
							if (marker.state === DrawState.PolygonNotClose) {
								marker.state = DrawState.PolygonClosed
							}
						})
						let closedMarker = this.markers.filter(marker => marker.state === DrawState.PolygonClosed).sort((a,
							b) => {
							return a.index - b.index
						})
						let points = closedMarker.map(marker => {
							return {
								latitude: marker.latitude,
								longitude: marker.longitude
							}
						})
						let centerPoint = getPolygonCenter(points)
						let centerMarker = {
							id: new Date().getTime() + 1,
							latitude: centerPoint.latitude,
							longitude: centerPoint.longitude,
							iconPath: MarkerIcon.EmptyIcon,
							state: DrawState.PolygonClosed,
							mode: DrawMode.PolygonMode,
							width: MarkerIcon.EmptyIconWidth,
							height: MarkerIcon.EmptyIconHeight,
							anchor: MarkerIcon.EmptyIconAnchor
						}
						centerMarker.markers = [centerMarker.id, ...closedMarker.map(m => m.id)]

						let polygon = {
							id: new Date().getTime(),
							points: points,
							strokeWidth: DrawConfig.StrokeWidth,
							state: DrawState.PolygonClosed,
							centerMarker: centerMarker.id,
							strokeColor: DrawConfig.StrokeColor,
							fillColor: DrawConfig.FillColor
						}
						centerMarker.polygon = polygon.id
						this.polygons.push(polygon)
						this.markers.push(centerMarker)
						this.currentState = DrawState.PolygonClosed
					}
				} else if (this.currentState === DrawState.PolygonClosed) {
					this.createSnapshots()
					let closedMarker = this.markers.filter(marker => marker.state === DrawState.PolygonClosed).sort((a,
						b) => {
						return a.index - b.index
					})
					let polygonClosedIndex = this.polygons.findIndex(polygon => polygon.state === DrawState.PolygonClosed)
					let points = this.polygons[polygonClosedIndex].points
					this.markers.push({
						id: new Date().getTime(),
						latitude: e.detail.latitude,
						longitude: e.detail.longitude,
						iconPath: MarkerIcon.PointIcon,
						state: DrawState.PolygonClosed,
						mode: DrawMode.PolygonMode,
						index: closedMarker.length + 1,
						width: MarkerIcon.PointIconWidth,
						height: MarkerIcon.PointIconHeight,
						anchor: MarkerIcon.PointIconAnchor
					})
					points.push({
						latitude: e.detail.latitude,
						longitude: e.detail.longitude
					})
					let centerPoint = getPolygonCenter(points)
					let centerMarkerIndex = this.findMarkerIndex(this.polygons[polygonClosedIndex].centerMarker)
					this.markers[centerMarkerIndex].latitude = centerPoint.latitude
					this.markers[centerMarkerIndex].longitude = centerPoint.longitude
					this.markers[centerMarkerIndex].markers = this.markers.filter(marker => marker.state === DrawState
						.PolygonClosed).map(m => m.id)
					this.polygons[polygonClosedIndex].points = points
				}
			},
			initFence(fenceData) {
				this.circles = []
				this.polygons = []
				this.markers = []
				this.includePoints = []
				this.snapshots = []
				this.drawModeChange(null)
				if (fenceData && fenceData.length > 0) {
					fenceData.forEach(fence => {
						if (fence.type === 1) {
							this.initCircle(fence)
						}
						if (fence.type === 2) {
							this.initRectang(fence)
						}
						if (fence.type === 3) {
							this.initPolygon(fence)
						}
					})
				} else {
					let mapContext = uni.createMapContext("fenceMap", this)
					mapContext.moveToLocation()
				}
			},
			initCircle(circleFence) {
				let centerMarker = {
					id: this.getIncremId(),
					latitude: circleFence.center[1],
					longitude: circleFence.center[0],
					iconPath: MarkerIcon.PointIcon,
					state: DrawState.CircleEnd,
					mode: DrawMode.CircleMode,
					width: MarkerIcon.PointIconWidth,
					height: MarkerIcon.PointIconHeight,
					anchor: MarkerIcon.PointIconAnchor,
				}
				let rangePoint = getCircleRangePoints(circleFence.center[1], circleFence.center[0], circleFence.radius)
				this.includePoints.push(...[rangePoint.East, rangePoint.North, rangePoint.South, rangePoint.West])
				let rangeMarker = {
					id:this.getIncremId(),
					latitude: rangePoint.East.latitude,
					longitude: rangePoint.East.longitude,
					iconPath: MarkerIcon.PointIcon,
					state: DrawState.CircleEnd,
					mode: DrawMode.CircleMode,
					width: MarkerIcon.PointIconWidth,
					height: MarkerIcon.PointIconHeight,
					anchor: MarkerIcon.PointIconAnchor,
					callout: {
						content: "半径 : " + circleFence.radius.toFixed(2) + " 米",
						fontSize: DrawConfig.CalloutFontSize,
						bgColor: DrawConfig.CalloutBgColor,
						borderRadius: DrawConfig.CalloutBorderRadius,
						display: DrawConfig.CalloutAlways,
						padding: DrawConfig.CalloutPadding,
						textAlign: DrawConfig.CalloutTextAlign
					}
				}
				let circle = {
					id: this.getIncremId(),
					latitude: centerMarker.latitude,
					longitude: centerMarker.longitude,
					radius: circleFence.radius,
					strokeWidth: DrawConfig.StrokeWidth,
					centerMarker: centerMarker.id,
					color: DrawConfig.StrokeColor,
					fillColor: DrawConfig.FillColor
				}
				centerMarker.circle = circle.id
				centerMarker.markers = [centerMarker.id, rangeMarker.id]
				this.markers.push(centerMarker)
				this.markers.push(rangeMarker)
				this.circles.push(circle)
			},
			initRectang(rectangFence) {
				let rectangPoints = rectangFence.polygon
				let points = [{
						latitude: rectangPoints[0][1],
						longitude: rectangPoints[0][0]
					},
					{
						latitude: rectangPoints[1][1],
						longitude: rectangPoints[1][0]
					},
					{
						latitude: rectangPoints[2][1],
						longitude: rectangPoints[2][0]
					},
					{
						latitude: rectangPoints[3][1],
						longitude: rectangPoints[3][0]
					}
				]
				this.includePoints.push(...points)
				let vertexMarker = {
					id:this.getIncremId(),
					latitude: points[0].latitude,
					longitude: points[0].longitude,
					iconPath: MarkerIcon.PointIcon,
					state: DrawState.RectangleEnd,
					mode: DrawMode.RectangleMode,
					width: MarkerIcon.PointIconWidth,
					height: MarkerIcon.PointIconHeight,
					anchor: MarkerIcon.PointIconAnchor
				}
				let pointMarker = {
					id: this.getIncremId(),
					latitude: points[2].latitude,
					longitude: points[2].longitude,
					iconPath: MarkerIcon.PointIcon,
					state: DrawState.RectangleEnd,
					mode: DrawMode.RectangleMode,
					width: MarkerIcon.PointIconWidth,
					height: MarkerIcon.PointIconHeight,
					anchor: MarkerIcon.PointIconAnchor
				}

				let centerMarker = {
					id: this.getIncremId(),
					latitude: rectangFence.center[1],
					longitude: rectangFence.center[0],
					iconPath: MarkerIcon.EmptyIcon,
					state: DrawState.RectangleEnd,
					mode: DrawMode.RectangleMode,
					width: MarkerIcon.EmptyIconWidth,
					height: MarkerIcon.EmptyIconHeight,
					anchor: MarkerIcon.EmptyIconAnchor
				}
				centerMarker.markers = [centerMarker.id, vertexMarker.id, pointMarker.id]
				let polygon = {
					id: this.getIncremId(),
					points: points,
					strokeWidth: DrawConfig.StrokeWidth,
					centerMarker: centerMarker.id,
					state: DrawState.RectangleEnd,
					strokeColor: DrawConfig.StrokeColor,
					fillColor: DrawConfig.FillColor
				}
				centerMarker.polygon = polygon.id
				this.markers.push(...[centerMarker, vertexMarker, pointMarker])
				this.polygons.push(polygon)
			},
			initPolygon(polygonFence) {
				let polygonPoints = polygonFence.polygon
				let points = []
				for (let index = 0; index < polygonPoints.length - 1; index++) {
					points.push({
						latitude: polygonPoints[index][1],
						longitude: polygonPoints[index][0]
					})
				}
				this.includePoints.push(...points)
				let centerMarker = {
					id: this.getIncremId(),
					latitude: polygonFence.center[1],
					longitude: polygonFence.center[0],
					iconPath: MarkerIcon.EmptyIcon,
					state: DrawState.PolygonEnd,
					mode: DrawMode.PolygonMode,
					width: MarkerIcon.EmptyIconWidth,
					height: MarkerIcon.EmptyIconHeight,
					anchor: MarkerIcon.EmptyIconAnchor
				}
				let pointMarker = []
				points.forEach((point, i) => {
					pointMarker.push({
						id: this.getIncremId(),
						latitude: point.latitude,
						longitude: point.longitude,
						iconPath: MarkerIcon.PointIcon,
						state: DrawState.PolygonEnd,
						mode: DrawMode.PolygonMode,
						index: i,
						width: MarkerIcon.PointIconWidth,
						height: MarkerIcon.PointIconHeight,
						anchor: MarkerIcon.PointIconAnchor
					})
				})
				let polygon = {
					id: this.getIncremId(),
					points: points,
					strokeWidth: DrawConfig.StrokeWidth,
					state: DrawState.PolygonEnd,
					centerMarker: centerMarker.id,
					strokeColor: DrawConfig.StrokeColor,
					fillColor: DrawConfig.FillColor
				}
				centerMarker.polygon = polygon.id
				centerMarker.markers = [centerMarker.id, ...pointMarker.map(m => m.id)]
				this.markers.push(...pointMarker)
				this.markers.push(centerMarker)
				this.polygons.push(polygon)
			},
			getIncremId(){
				return this.incremId++
			},
			getData() {
				this.snapshots = []
				this.drawModeChange(null)
				let data = []
				this.circles.forEach(circle => {
					let centerMarkerIndex = this.findMarkerIndex(circle.centerMarker)
					let centerMarker = this.markers[centerMarkerIndex]
					data.push({
						type: 1,
						center: [
							centerMarker.longitude,
							centerMarker.latitude
						],
						radius: circle.radius,
						polygon: null
					})
				})
				this.polygons.forEach(polygon => {
					if (polygon.state === DrawState.RectangleEnd) {
						let centerMarkerIndex = this.findMarkerIndex(polygon.centerMarker)
						let centerMarker = this.markers[centerMarkerIndex]
						let points = polygon.points.map(point => {
							return [point.longitude, point.latitude]
						})
						points.push(points[0])
						data.push({
							type: 2,
							center: [
								centerMarker.longitude,
								centerMarker.latitude
							],
							radius: null,
							polygon: points
						})
					} else if (polygon.state === DrawState.PolygonEnd || polygon.state === DrawState
						.PolygonClosed) {
						let centerMarkerIndex = this.findMarkerIndex(polygon.centerMarker)
						let centerMarker = this.markers[centerMarkerIndex]
						let points = polygon.points.map(point => {
							return [point.longitude, point.latitude]
						})
						points.push(points[0])
						data.push({
							type: 3,
							center: [
								centerMarker.longitude,
								centerMarker.latitude
							],
							radius: null,
							polygon: points
						})
					}
				})
				return data;
			}
		}
	}

</script>

<style scoped>
	.fence-map-view {
		width: 100%;
		height: 100%;
	}

	.fence-map {
		width: 100%;
		height: 100%;
	}

	.fence-control {
		position: absolute;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>